@import "./variables/index";
$box-color: #25729d;
$text-color:#fff;
.wrapper {
  height: 100%;
  border: 1px solid $box-color;
  overflow-y: hidden;
  .row{
    height: 100%;
    padding: 5px;
    overflow-y: auto;
    .rowTop {
      height: 400px;
      padding-bottom: 5px;
      .rowHeightFull {
        height: 100%;
        .rightBox {
          height: 400px;
          border: 1px solid #007cb7;
          .pointSelect {
            margin: 5px 0;
          }
        }
      }
      .padding10 {
        padding: 10px;
      }
      .textColor {
        color: $text-color;
      }
    }
    .rowBottom {
      // height: 258px;
      overflow: scroll;
      padding: 5px;
      margin-top: 5px;
      border: 1px solid $box-color;
      position: relative;
      table {
        width: 100%; 
        table-layout: fixed;
        margin-bottom: 28px;
      }
      .memoryBtn {
        position: absolute;
        top:5px;
        right:120px;
      }
      .box {
        width: 100%;
        margin-bottom: 0;
        border-top: none!important;
        position: relative;
        border-radius: 3px;
        background: #fff;
        background-color: #2a3e52;
        box-shadow: 0 1px 1px rgba(0,0,0,.1);
        .timeline {
          display: inline-block;
          width: 100%;
          overflow-x: scroll;
          height: 210px;
          padding-left: 100px;
          margin: 0!important;
          color: rgb(255, 255, 255); 
          // background-color: rgb(60, 141, 188);
          margin: 5px;
          width: 100%;
          list-style: none;
          white-space: nowrap;
          font-size: 13px;
          li {
            top: 40px;
            display: inline-block;
            width: 280px;
            height: 100px;
            position: relative;
            margin-right: 10px;
            margin-bottom: 15px;
            &:before {
              width: 280px;
              border: 3px dotted #50748e;
              border-right: none;
              border-left: none;
              border-bottom: none;
              position: absolute;
              top: 19px;
              left: 50px;
              display: table;
              content: " ";
            }
            i {
              cursor: pointer;
              z-index: 2;
              color: #fff;
              width: 40px;
              height: 40px;
              padding-top: 5px;
              font-size: 15px;
              line-height: 30px;
              position: absolute;
              border-radius: 50%;
              text-align: center;
              left: 18px;
              top: 0;
              padding: 15px;
              margin-bottom: 20px;
              border: 1px solid transparent;
            }
            .timelinItem {
              margin-top: 10px;
              width: 280px;
              display: inline-block;
              position: absolute;
              top: 40px;
              z-index: 1;
              left: -140px;
              background: #051f32!important;
              margin-left: 60px;
              margin-right: 15px;
              padding: 0;
              .time {
                position: absolute;
                top: -120px;
                z-index: 999;
                font-weight: 700;
                color: #23aabc!important;
                padding-top: 45px!important;
                float: right;
                padding: 10px;
                font-size: 12px;
              }
              .timelineHeader  {
                white-space: nowrap;
                line-height: 15px;
                padding-left: 30px;
                word-break: break-all;
                color: #bbb!important;
                border-top-left-radius: 20px;
                border-top-right-radius: 20px;
                border-bottom-right-radius: 20px;
                border-bottom-left-radius: 20px;
                text-overflow: ellipsis;
                overflow: hidden;
                padding: 10px;
                margin: 0;
              }
            }
          }
        }
      }
    }
  }
}
